<template>
  <div>
        <button @click="add">点击我+1</button>
        <span :style="{fontSize:count+'px'}">{{count}}</span>
        <button @click="minus">点击我-1</button>
  </div>
</template>

<script>
//Vue.extend组件简写方式：对象想法,它即为曾经学习的配置项
export default {
  //组件的响应式data函数：务必是函数写法，务必要返回一个对象
  data() {
    return { count: 16 };
  },
  methods: {
      add(){
          this.count++;
          console.log(this);
      },
      minus(){
          this.count--;
      }
  }
  //这里不能书写template模板编辑器,因为vue运行版本依赖包是没有模板编辑器的
  //组件的模板在template标签里面书写，即为咱们当年template模板编辑器。
};
</script>

<style scoped>
   button{
       width: 150px;
       height: 50px;
       background: #000;
       color: red;
   }
</style>